<template>
  <div class="all" >
  <div class="apply-top">
  <el-form :inline="true" :model="topForm" class="apply-top-form" label-width="130px" label-position="left" size="mini">
    <el-form-item label="企业名称" prop="companyName" style="width: 45%">
      <el-input v-model="topForm.companyName" style="width: 100%"></el-input>
    </el-form-item>
    <el-form-item label="统一社会信用代码" prop="creditCode" style="width: 45%"  >
      <el-input v-model="topForm.creditCode" style="width: 100%" ></el-input>
    </el-form-item>
    <el-form-item label="企业类型" prop="companyType" style="width: 45%">
      <el-select v-model="topForm.companyType" style="width: 100%" >
        <el-option label="类型一" value="typeOne"></el-option>
        <el-option label="类型二" value="typeTwo"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所在地区" prop="area" style="width: 45%">
      <el-select v-model="topForm.area" style="width: 100%" >
        <el-option label="区域一" value="areaOne"></el-option>
        <el-option label="区域二" value="areaTwo"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="地址" prop="address" style="width: 90%;float: left">
      <el-input v-model="topForm.adress" style="width: 100%" ></el-input>
    </el-form-item>
  </el-form>
  </div>
  <div class="apply-center">
    <el-form :inline="true" :model="centerForm" class="apply-center-form" label-width="130px" label-position="left"  size="mini">
      <el-form-item label="法定代表人姓名" prop="delegates" style="width: 45%;float: left">
        <el-input v-model="centerForm.delegates" style="width: 100%"></el-input>
      </el-form-item>
      <el-form-item label="法定代表人类型" prop="deleType" style="width: 45%;float: left">
        <el-select v-model="centerForm.deleType" style="width: 100%" >
          <el-option label="类型一" value="deleOne"></el-option>
          <el-option label="类型二" value="deleTwo"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="法定代表人证件号" prop="idNumber" style="width: 45%;float: left">
        <el-input v-model="centerForm.idNumber" style="width: 100%" ></el-input>
      </el-form-item>
      <el-form-item label="登记状态" prop="RegiStatus" style="width: 45%;float: left">
        <el-select v-model="centerForm.RegiStatus" style="width: 320px" >
          <el-option label="状态一" value="StatusOne"></el-option>
          <el-option label="状态二" value="StatusTwo"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="营业执照电子版" prop="license" style="width: 90%;float: left">
        <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed">
          <el-button size="small" v-model="centerForm.license" type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="企业联系人姓名" prop="contacts" style="width: 45%;float: left">
        <el-input v-model="centerForm.contacts" style="width: 100%"></el-input>
      </el-form-item>
      <el-form-item label="企业联系人邮箱" prop="mailbox" style="width: 45%;float: left">
        <el-input v-model="centerForm.mailbox" style="width: 100%" ></el-input>
      </el-form-item>
      <el-form-item label="企业联系电话" prop="phone" style="width: 45%;float: left">
        <el-input v-model="centerForm.phone" style="width: 100%" ></el-input>
      </el-form-item>
      <el-form-item label="业务员编码" prop="code" style="width: 45%;float: left">
        <el-input v-model="centerForm.code" style="width: 100%" ></el-input>
      </el-form-item>
    </el-form>
  </div>
    <div class="apply-bottom" >
      <el-form :inline="true" :model="bottomForm" class="apply-bottom-form" label-width="130px" label-position="left"  size="mini">
        <el-form-item label="公司管理员账号" prop="userCode"  style="width: 45%">
          <el-input v-model="bottomForm.userCode" style="width: 100%" ></el-input>
        </el-form-item>
        <el-form-item label="公司管理员密码" prop="userPassword"  style="width: 45%">
          <el-input v-model="bottomForm.userPassword" style="width: 100%" type="password" bindinput="passwordInput"></el-input>
        </el-form-item>
        <el-form-item  prop="type">
          <el-checkbox-group v-model="bottomForm.types">
            <el-checkbox  name="type" class="check">我已同意<el-link :underline="false" href="../index">《医疗器械唯一编码平台管理规定》</el-link></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <el-form :inline="true" :model="sumbitform" class="apply-bottom-form">
    <el-form-item class="button-sumb" >
      <el-button type="primary" @click="submitForm('loginForm')" style="width: 110px;height: 33px" class="sum" disabled>提交申请</el-button>
    </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Apply",
  data() {
    return {
      topForm: {
        companyName: '',
        creditCode: '',
        companyType: '',
        area: '',
        adress: ''
      },
      centerForm: {
        delegates: '',
        deleType: '',
        idNumber: '',
        RegiStatus: '',
        license: '',
        contacts:'',
        mailbox: '',
        phone: '',
        code: ''
      },
      bottomForm:{
        userCode: '',
        userPassword: '',
        types: '',
      },
      sumbitForm:{

      }
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!');
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    }
  }
}
</script>

<style scoped>
  .all{
    margin: 10px;
    padding-top: 3%;
    padding-left: 3%;
    width: 77%;
    height: 91%;
    position: fixed;
    left: 18%;
    border-radius: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
  }
  .check{
    font-size: xx-small;
  }
  .apply-top{
    position: fixed;
    top: 10%;
  }
  .apply-center{
    position: fixed;
    bottom: 33%;
  }
  .apply-bottom{
    position: fixed;
    bottom: 15%;
  }
  .button-sumb{
    position: fixed;
    bottom: 5%;
    left: 50%;
  }
  /*.sum{
    background-color: grey;
    border-color: grey;
  }*/
</style>
